<template lang="pug">
   el-container
    el-header
      h3 附件管理
      el-pagination(background @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-size="per_page" layout="total, prev, pager, next" :total="totalCount")
    el-main
      el-table(:data='dataList')
        el-table-column(prop='id' label='编号' width='80')
        el-table-column(label='上传文件名' width='380')
          template(slot-scope="scope")
            a.fileurl(:href="scope.row.url") {{scope.row.filename}}
        el-table-column( label='文件大小' width='280')
          template(slot-scope="scope") {{scope.row.size | formatSize }}
        el-table-column(prop='owner_count' label='使用次数' width='80')
        el-table-column(label='操作')
          template(slot-scope="scope")
            el-button(size="small" type="danger" @click="rowDeleteBtn(scope.$index, scope.row)") 删除
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { attachment_list, attachment_remove } from "../../services";
import RemoteValidatorMixin from "../../components/RemoteValidatorAndTableEditMixin";
import { formatSize } from "../../util/show";

@Component({
  components: {},
  mixins: [RemoteValidatorMixin],
  filters: {
    formatSize
  }
})
export default class Attachement extends Vue {
  constructor() {
    super();
  }

  public mounted() {
    let self: any = this;
    this.$nextTick(function() {
      this.$on("update", async function() {
        let data: any = await attachment_list(self.pageNum);
        if (data.success) {
          self.list = data.data;
        }
      });
      this.$emit("update");
    });
  }

  public async rowDeleteBtn(idx: number, rowData: any) {
    this.rowRemove(attachment_remove, rowData.id, this.dataList, idx, "附件");
  }
}
</script>

<style lang="scss" scoped>
@import "../../../sass/variables";
.el-container {
  border: 1px solid $main-head-border-color;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}

.el-header {
  border-bottom: 1px solid $main-head-border-color;
  background-color: $main-head-bg-color;
  line-height: 60px;

  h3 {
    float: left;
    margin: 0;
    padding: 0;
  }

  .el-pagination {
    float: right;
    padding-top: (60px - 20px) / 2;
  }
}

.fileurl {
  color: $gray;
  text-decoration: none;
}
.el-main {
  background-color: $white;
}
</style>
